<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/hexo_blog/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/hexo_blog/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/hexo_blog/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/hexo_blog/images/logo.svg" color="#222">

<link rel="stylesheet" href="/hexo_blog/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.2/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.css">
  <script src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.js"></script>

<script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"bone-nails.gitee.io","root":"/hexo_blog/","images":"/hexo_blog/images","scheme":"Gemini","version":"8.2.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":false,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/hexo_blog/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":true,"preload":true}};
  </script>
<meta name="description" content="hello world（插值表达式、定时器、app.$data.） 12345678910111213141516171819202122232425262728293031323334353637383940414243&lt;!DOCTYPE html&gt;&lt;html lang&#x3D;&quot;en&quot;&gt;&lt;head&gt;    &lt;meta charse">
<meta property="og:type" content="article">
<meta property="og:title" content="vue笔记">
<meta property="og:url" content="https://bone-nails.gitee.io/2021/04/01/vue%E7%AC%94%E8%AE%B0/index.html">
<meta property="og:site_name" content="Carson Zhao">
<meta property="og:description" content="hello world（插值表达式、定时器、app.$data.） 12345678910111213141516171819202122232425262728293031323334353637383940414243&lt;!DOCTYPE html&gt;&lt;html lang&#x3D;&quot;en&quot;&gt;&lt;head&gt;    &lt;meta charse">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://i.loli.net/2020/09/18/gBb3pye5KSLEY74.png">
<meta property="og:image" content="https://i.loli.net/2020/09/18/cjWn8ozbPuS4sgv.png">
<meta property="og:image" content="https://i.loli.net/2020/09/18/6mqfX7IonTjGe1c.png">
<meta property="og:image" content="https://i.loli.net/2020/09/18/N91pIB2PwKnJdOG.png">
<meta property="og:image" content="https://i.loli.net/2020/09/18/vSMdye7nTAK6k4r.png">
<meta property="og:image" content="https://i.loli.net/2020/09/18/vNTHR7Zxob6IpCM.png">
<meta property="og:image" content="https://i.loli.net/2020/09/18/4ER6rJVpvydKPix.png">
<meta property="og:image" content="https://i.loli.net/2020/09/18/VXczQ1oZi6pEqUf.png">
<meta property="og:image" content="https://i.loli.net/2020/09/18/lnpHIWJTA7vey6N.png">
<meta property="og:image" content="https://i.loli.net/2020/09/18/m32e7bpaDQFs1rH.png">
<meta property="og:image" content="https://i.loli.net/2020/09/19/n4oAjpwDZSEu8Km.png">
<meta property="og:image" content="https://i.loli.net/2020/09/19/G8HLlBftZh9CbdS.png">
<meta property="article:published_time" content="2021-04-01T04:23:20.000Z">
<meta property="article:modified_time" content="2021-04-01T04:21:39.776Z">
<meta property="article:author" content="Carson Zhao">
<meta property="article:tag" content="vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://i.loli.net/2020/09/18/gBb3pye5KSLEY74.png">


<link rel="canonical" href="https://bone-nails.gitee.io/2021/04/01/vue%E7%AC%94%E8%AE%B0/">


<script class="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>
<title>vue笔记 | Carson Zhao</title>
  




  <noscript>
  <style>
  body { margin-top: 2rem; }

  .use-motion .menu-item,
  .use-motion .sidebar,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header {
    visibility: visible;
  }

  .use-motion .header,
  .use-motion .site-brand-container .toggle,
  .use-motion .footer { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle,
  .use-motion .custom-logo-image {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line {
    transform: scaleX(1);
  }

  .search-pop-overlay, .sidebar-nav { display: none; }
  .sidebar-panel { display: block; }
  </style>
</noscript>

<link rel="alternate" href="/hexo_blog/atom.xml" title="Carson Zhao" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/hexo_blog/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">Carson Zhao</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-home"><a href="/hexo_blog/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li>
        <li class="menu-item menu-item-about"><a href="/hexo_blog/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li>
        <li class="menu-item menu-item-tags"><a href="/hexo_blog/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li>
        <li class="menu-item menu-item-categories"><a href="/hexo_blog/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#hello-world%EF%BC%88%E6%8F%92%E5%80%BC%E8%A1%A8%E8%BE%BE%E5%BC%8F%E3%80%81%E5%AE%9A%E6%97%B6%E5%99%A8%E3%80%81app-data-%EF%BC%89"><span class="nav-number">1.</span> <span class="nav-text">hello world（插值表达式、定时器、app.$data.）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ToDoList%E5%AE%9E%E7%8E%B0%EF%BC%88v-model%E3%80%81v-for-%E2%80%9Citem-in-list%E2%80%9D%E3%80%81v-on-click%E3%80%81this%E3%80%81%E6%95%B0%E7%BB%84%E7%9A%84push%E6%96%B9%E6%B3%95%EF%BC%89"><span class="nav-number">2.</span> <span class="nav-text">ToDoList实现（v-model、v-for &#x3D; “item in list”、v-on:click、this、数组的push方法）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%94%B1ToDoList%E5%BC%95%E5%8F%91%E7%9A%84MVVM%E6%80%9D%E6%83%B3%EF%BC%88VM%E5%B1%82%E9%80%9A%E8%BF%87%E8%99%9A%E6%8B%9FDOM%E5%92%8CES5%E7%9A%84definePropties%E5%AE%9E%E7%8E%B0%EF%BC%88%E6%B6%89%E5%8F%8A%E5%88%B0%E5%BA%95%E5%B1%82%EF%BC%89%EF%BC%89"><span class="nav-number">3.</span> <span class="nav-text">由ToDoList引发的MVVM思想（VM层通过虚拟DOM和ES5的definePropties实现（涉及到底层））</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BA%E4%BA%86%E5%8C%BA%E5%88%86MVVM%E5%92%8CMVP-MVC%E7%9A%84%E4%B8%8D%E5%90%8C-%E6%88%91%E4%BB%AC%E4%BD%BF%E7%94%A8jQuery%E5%AE%9E%E7%8E%B0%E4%BB%A5%E4%B8%8BToDoList%E6%A1%88%E4%BE%8B"><span class="nav-number">4.</span> <span class="nav-text">为了区分MVVM和MVP&#x2F;MVC的不同,我们使用jQuery实现以下ToDoList案例</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E5%8C%96%E6%94%B9%E9%80%A0ToDoList-%E7%88%B6%E7%BB%84%E4%BB%B6%E5%90%91%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC%E3%80%81%E5%B1%80%E9%83%A8%E7%BB%84%E4%BB%B6%E4%B8%8E%E5%85%A8%E5%B1%80%E7%BB%84%E4%BB%B6"><span class="nav-number">5.</span> <span class="nav-text">组件化改造ToDoList(父组件向子组件传值、局部组件与全局组件)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">6.</span> <span class="nav-text">总结</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%90%E7%BB%84%E4%BB%B6%E5%90%91%E7%88%B6%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC%EF%BC%8C%E5%AE%9E%E7%8E%B0%E7%82%B9%E5%87%BB%E5%88%A0%E9%99%A4%E6%95%88%E6%9E%9C"><span class="nav-number">7.</span> <span class="nav-text">子组件向父组件传值，实现点击删除效果</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%BB%E7%BB%93-1"><span class="nav-number">8.</span> <span class="nav-text">总结</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E5%AE%9E%E4%BE%8B"><span class="nav-number">9.</span> <span class="nav-text">vue实例</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90"><span class="nav-number">10.</span> <span class="nav-text">Vue生命周期钩子</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#VUE%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95"><span class="nav-number">11.</span> <span class="nav-text">VUE模板语法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E3%80%81%E6%96%B9%E6%B3%95%E5%92%8C%E4%BE%A6%E5%90%AC%E5%99%A8"><span class="nav-number">12.</span> <span class="nav-text">Vue计算属性、方法和侦听器</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95"><span class="nav-number">12.1.</span> <span class="nav-text">计算属性和方法</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BE%A6%E5%90%AC%E5%99%A8"><span class="nav-number">13.</span> <span class="nav-text">侦听器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%BB%91%E5%AE%9A%E4%B9%8Bclass%E5%AF%B9%E8%B1%A1%E7%BB%91%E5%AE%9A"><span class="nav-number">14.</span> <span class="nav-text">vue中的样式绑定之class对象绑定</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%BB%91%E5%AE%9A%E4%B9%8Bclass%E6%95%B0%E7%BB%84%E7%BB%91%E5%AE%9A"><span class="nav-number">15.</span> <span class="nav-text">vue中的样式绑定之class数组绑定</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E6%A0%B7%E5%BC%8F%E7%BB%91%E5%AE%9A%E4%B9%8BStyle%E7%BB%91%E5%AE%9A"><span class="nav-number">16.</span> <span class="nav-text">vue样式绑定之Style绑定</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93%EF%BC%88v-if%E5%92%8Cv-for%EF%BC%89"><span class="nav-number">17.</span> <span class="nav-text">vue条件渲染（v-if和v-for）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#key%E5%80%BC%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="nav-number">18.</span> <span class="nav-text">key值的使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E5%9C%A8%E5%AF%B9%E9%A1%B5%E9%9D%A2%E8%BF%9B%E8%A1%8C%E9%87%8D%E6%96%B0%E6%B8%B2%E6%9F%93%E6%97%B6%EF%BC%8C%E4%BC%9A%E5%B0%BD%E9%87%8F%E7%9A%84%E5%A4%8D%E7%94%A8%E7%9B%B8%E5%90%8C%E7%9A%84%E4%BB%A3%E7%A0%81%EF%BC%8C%E6%B7%BB%E5%8A%A0key%E5%80%BC%E5%8F%AF%E4%BB%A5%E6%98%AFvue%E9%87%8D%E6%96%B0%E6%B8%B2%E6%9F%93%E7%9B%B8%E5%90%8C%E7%9A%84%E4%BB%A3%E7%A0%81"><span class="nav-number">19.</span> <span class="nav-text">vue在对页面进行重新渲染时，会尽量的复用相同的代码，添加key值可以是vue重新渲染相同的代码</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E4%B8%AD%E7%9A%84%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93%EF%BC%88-key%E3%80%81%E5%AF%B9%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0%E8%BF%9B%E8%A1%8C%E4%BF%AE%E6%94%B9%E3%80%81%E5%AF%B9%E5%AF%B9%E8%B1%A1%E8%BF%9B%E8%A1%8C%E9%81%8D%E5%8E%86v-for-%E2%80%9Citem-of-xxx%E2%80%9D%EF%BC%89"><span class="nav-number">20.</span> <span class="nav-text">vue中的列表渲染（:key、对数组元素进行修改、对对象进行遍历v-for&#x3D;“item of xxx”）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue%E4%B8%AD%E7%9A%84set%E6%96%B9%E6%B3%95%EF%BC%88%E5%AF%B9%E5%AF%B9%E8%B1%A1%E8%BF%9B%E8%A1%8C%E4%BF%AE%E6%94%B9%EF%BC%89"><span class="nav-number">21.</span> <span class="nav-text">Vue中的set方法（对对象进行修改）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E7%9A%84set%E6%96%B9%E6%B3%95%E6%94%B9%E5%8F%98%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0"><span class="nav-number">22.</span> <span class="nav-text">vue的set方法改变数组元素</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86-amp-amp-VUE%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6%EF%BC%88-stop%E3%80%81-prevent%E3%80%81-self%E3%80%81-capture%E5%92%8C%E9%BC%A0%E6%A0%87%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6%EF%BC%89"><span class="nav-number">23.</span> <span class="nav-text">Vue中的事件处理&amp;&amp;VUE中的事件修饰符（.stop、.prevent、.self、.capture和鼠标按键修饰符）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue%E4%B8%AD%E7%9A%84%E8%A1%A8%E5%8D%95%E7%BB%91%E5%AE%9A%EF%BC%88v-model%EF%BC%89%E8%A1%A8%E5%8D%95%E4%BF%AE%E9%A5%B0%E7%AC%A6%EF%BC%9Atrim-number-lazy"><span class="nav-number">24.</span> <span class="nav-text">Vue中的表单绑定（v-model）表单修饰符：trim number lazy</span></a></li><li class="nav-item nav-level-2"><a class="nav-link"><span class="nav-number">25.</span> <span class="nav-text"></span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8%E7%BB%86%E8%8A%82%E4%B9%8Bis-%E2%80%9C%E5%AD%90%E7%BB%84%E4%BB%B6%E2%80%9D-%E5%90%8C%E6%A0%B7%E9%80%82%E7%94%A8%E4%BA%8Eul%E3%80%81table%E3%80%81ol%E3%80%81select"><span class="nav-number">26.</span> <span class="nav-text">组件使用细节之is&#x3D;“子组件”(同样适用于ul、table、ol、select)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E4%B8%AD%E7%9A%84ref%E5%BC%95%E7%94%A8%EF%BC%88%E5%9C%A8vue%E4%B8%AD%E6%93%8D%E4%BD%9CDOM%E6%9D%A5%E8%A7%A3%E5%86%B3%E4%B8%80%E4%BA%9B%E5%A4%8D%E6%9D%82%E7%9A%84%E9%97%AE%E9%A2%98%EF%BC%89"><span class="nav-number">27.</span> <span class="nav-text">vue中的ref引用（在vue中操作DOM来解决一些复杂的问题）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AF%B9Vue%E4%B8%AD%E5%BE%97%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8ref%E5%BC%95%E7%94%A8%EF%BC%8C%E6%8B%BF%E5%88%B0%E7%9A%84%E5%B0%B1%E6%98%AF%E8%AF%A5%E7%BB%84%E4%BB%B6%E7%9A%84%E5%BC%95%E7%94%A8"><span class="nav-number">28.</span> <span class="nav-text">对Vue中得组件使用ref引用，拿到的就是该组件的引用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ref%E6%80%BB%E7%BB%93"><span class="nav-number">29.</span> <span class="nav-text">ref总结</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC"><span class="nav-number">30.</span> <span class="nav-text">父子组件传值</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E7%9A%84%E5%8F%82%E6%95%B0%E6%A0%A1%E9%AA%8C%E5%92%8C%E9%9D%9Eprops%E7%89%B9%E6%80%A7"><span class="nav-number">31.</span> <span class="nav-text">组件的参数校验和非props特性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E4%B8%AD%E5%AE%9A%E4%B9%89%E5%8E%9F%E7%94%9F%E4%BA%8B%E4%BB%B6-native"><span class="nav-number">32.</span> <span class="nav-text">vue中定义原生事件.native</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E9%9D%9E%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E4%B9%8B%E9%97%B4%E7%9A%84%E4%BC%A0%E5%80%BC%EF%BC%88%E5%8F%91%E5%B8%83-%E8%AE%A2%E9%98%85%E6%A8%A1%E5%BC%8F-Bus-%E6%80%BB%E7%BA%BF%EF%BC%89"><span class="nav-number">33.</span> <span class="nav-text">vue非父子组件之间的传值（发布-订阅模式&#x2F;Bus&#x2F;总线）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9C%A8Vue%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BDslot%EF%BC%88%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD%E5%8F%AF%E4%BB%A5%E5%90%91%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BC%98%E9%9B%85%E7%9A%84%E4%BC%A0%E9%80%92DOM%E7%BB%93%E6%9E%84%EF%BC%89"><span class="nav-number">34.</span> <span class="nav-text">在Vue中使用插槽slot（使用插槽可以向子组件优雅的传递DOM结构）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD"><span class="nav-number">35.</span> <span class="nav-text">具名插槽</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD"><span class="nav-number">36.</span> <span class="nav-text">作用域插槽</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8Ev-once%E6%8C%87%E4%BB%A4"><span class="nav-number">37.</span> <span class="nav-text">动态组件与v-once指令</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Carson Zhao"
      src="/hexo_blog/images/1.png">
  <p class="site-author-name" itemprop="name">Carson Zhao</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/hexo_blog/archives">
          <span class="site-state-item-count">59</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/hexo_blog/categories/">
          
        <span class="site-state-item-count">14</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/hexo_blog/tags/">
          
        <span class="site-state-item-count">35</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="cc-license site-overview-item animated" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" class="cc-opacity" rel="noopener" target="_blank"><img src="/hexo_blog/images/cc-by-nc-sa.svg" alt="Creative Commons"></a>
  </div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://bone-nails.gitee.io/2021/04/01/vue%E7%AC%94%E8%AE%B0/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/hexo_blog/images/1.png">
      <meta itemprop="name" content="Carson Zhao">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Carson Zhao">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          vue笔记
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>
      

      <time title="创建时间：2021-04-01 12:23:20 / 修改时间：12:21:39" itemprop="dateCreated datePublished" datetime="2021-04-01T12:23:20+08:00">2021-04-01</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/hexo_blog/categories/vue/" itemprop="url" rel="index"><span itemprop="name">vue</span></a>
        </span>
    </span>

  
    <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="far fa-eye"></i>
      </span>
      <span class="post-meta-item-text">阅读次数：</span>
      <span id="busuanzi_value_page_pv"></span>
    </span>
    <span class="post-meta-item" title="本文字数">
      <span class="post-meta-item-icon">
        <i class="far fa-file-word"></i>
      </span>
      <span class="post-meta-item-text">本文字数：</span>
      <span>43k</span>
    </span>
    <span class="post-meta-item" title="阅读时长">
      <span class="post-meta-item-icon">
        <i class="far fa-clock"></i>
      </span>
      <span class="post-meta-item-text">阅读时长 &asymp;</span>
      <span>39 分钟</span>
    </span>
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h2 id="hello-world（插值表达式、定时器、app-data-）"><a href="#hello-world（插值表达式、定时器、app-data-）" class="headerlink" title="hello world（插值表达式、定时器、app.$data.）"></a>hello world（插值表达式、定时器、app.$data.）</h2><span id="more"></span>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;!-- 引入vue的库 --&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;!-- &#123;&#123;插值表达式&#125;&#125; --&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;&#123;&#123;content&#125;&#125;&lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    &lt;!-- 使用原生JS实现div里面的文本</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var dom &#x3D; document.getElementById(&quot;app&quot;);</span><br><span class="line">        dom.innerHTML &#x3D; &quot;helloworld&quot;;</span><br><span class="line">        &#x2F;&#x2F; 两秒钟后将helloworld改为bye world</span><br><span class="line">        setTimeout(function () &#123;</span><br><span class="line">            dom.innerHTML &#x3D; &quot;bye world&quot;;</span><br><span class="line">        &#125;, 2000)</span><br><span class="line">    &lt;&#x2F;script&gt; --&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var app &#x3D; new Vue(&#123;</span><br><span class="line">            &#x2F;&#x2F; el：指定Vue实例接管id为app的标签里的Dom</span><br><span class="line">            el: &#39;#app&#39;,</span><br><span class="line">            &#x2F;&#x2F; 通过插值表达式调用数据</span><br><span class="line">            data: &#123;</span><br><span class="line">                content: &#39;helloworld&#39;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">        setTimeout(function () &#123;</span><br><span class="line">            app.$data.content &#x3D; &quot;bye world&quot;;</span><br><span class="line">            &#x2F;&#x2F; 这里的$data相当于data的别名</span><br><span class="line">            &#x2F;&#x2F; 这里我想的是this.content &#x3D; &quot;bye world&quot;,显然不对，不能用this，因为脱离了var app&#123;&#125;的范围。</span><br><span class="line">        &#125;, 2000)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="ToDoList实现（v-model、v-for-“item-in-list”、v-on-click、this、数组的push方法）"><a href="#ToDoList实现（v-model、v-for-“item-in-list”、v-on-click、this、数组的push方法）" class="headerlink" title="ToDoList实现（v-model、v-for = “item in list”、v-on:click、this、数组的push方法）"></a>ToDoList实现（v-model、v-for = “item in list”、v-on:click、this、数组的push方法）</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- 要想拿到输入框里的值，必须通过v-model给他双向绑定一个值，这样我们在vue实例中就能拿到这个值 --&gt;</span><br><span class="line">        &lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;inputValue&quot;&gt;</span><br><span class="line">        &lt;!-- 通过v-on:click绑定事件，点击后回去vue实例中找这个方法，并且自动执行该方法 --&gt;</span><br><span class="line">        &lt;button v-on:click&#x3D;&quot;handleBtnClick&quot;&gt;提交&lt;&#x2F;button&gt;</span><br><span class="line">        &lt;ul&gt;</span><br><span class="line">            &lt;!--通过for循环拿到list数组里的内容， 这里别忘了item加上&#123;&#123;&#125;&#125; item代表循环的每一项的内容 --&gt;</span><br><span class="line">            &lt;li v-for&#x3D;&quot;item in list&quot;&gt;&#123;&#123;item&#125;&#125;&lt;&#x2F;li&gt;</span><br><span class="line">        &lt;&#x2F;ul&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var app &#x3D; new Vue(&#123;</span><br><span class="line">            el: &#39;#app&#39;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                &#x2F;&#x2F; 与输入框绑定的inputValue对应，</span><br><span class="line">                &#x2F;&#x2F;修改vue实例中的值会影响输入框的inputValue，同样输入框的inputVlue值也会影响Vue实例中对应的值，</span><br><span class="line">                &#x2F;&#x2F;这就是双向绑定(将输入框的value值和vue实例中inputValue进行了绑定)。</span><br><span class="line">                inputValue: &#39;&#39;,</span><br><span class="line">                &#x2F;&#x2F; 定义了数组，用来存储li里面的内容</span><br><span class="line">                list: [&#39;第一课的内容&#39;, &#39;第二课的内容&#39;]</span><br><span class="line">            &#125;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                &#x2F;&#x2F; 点击按钮触发的事件</span><br><span class="line">                handleBtnClick: function () &#123;</span><br><span class="line">                    &#x2F;&#x2F; alert(this.inputValue)</span><br><span class="line">                    &#x2F;&#x2F; &#x2F;&#x2F; 这里为啥不是app.$data.inputValue呢？</span><br><span class="line">                    &#x2F;&#x2F; &#x2F;&#x2F;原因很简单，因为methods：是属于app这个vue实例的范围内的，所以直接用this.调用就行了，也不需要给data起别名</span><br><span class="line">                    this.list.push(this.inputValue)</span><br><span class="line">                    &#x2F;&#x2F; 这一步的作用是当用户输入完后自动地将输入框清空</span><br><span class="line">                    this.inputValue &#x3D; &#39;&#39;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="由ToDoList引发的MVVM思想（VM层通过虚拟DOM和ES5的definePropties实现（涉及到底层））"><a href="#由ToDoList引发的MVVM思想（VM层通过虚拟DOM和ES5的definePropties实现（涉及到底层））" class="headerlink" title="由ToDoList引发的MVVM思想（VM层通过虚拟DOM和ES5的definePropties实现（涉及到底层））"></a>由ToDoList引发的MVVM思想（VM层通过虚拟DOM和ES5的definePropties实现（涉及到底层））</h2><ul>
<li><p>M：model数据模块   V:view视图模块  VM：视图-数据模块</p>
</li>
<li><p>使用的MVVM思想，我们就再也不用操作DOM了，而是通过修改数据。（底层自动帮助我们调用Dom）重新渲染页面</p>
<p><img src="https://i.loli.net/2020/09/18/gBb3pye5KSLEY74.png" alt="image-20200917013151860"></p>
</li>
</ul>
<h2 id="为了区分MVVM和MVP-MVC的不同-我们使用jQuery实现以下ToDoList案例"><a href="#为了区分MVVM和MVP-MVC的不同-我们使用jQuery实现以下ToDoList案例" class="headerlink" title="为了区分MVVM和MVP/MVC的不同,我们使用jQuery实现以下ToDoList案例"></a>为了区分MVVM和MVP/MVC的不同,我们使用jQuery实现以下ToDoList案例</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;jquery.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;input type&#x3D;&quot;text&quot; id&#x3D;&quot;input&quot;&gt;</span><br><span class="line">        &lt;button id&#x3D;&quot;btn&quot;&gt;提交&lt;&#x2F;button&gt;</span><br><span class="line">        &lt;ul id&#x3D;&quot;list&quot;&gt;</span><br><span class="line">        &lt;&#x2F;ul&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        function Page() &#123;</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line">        $.extend(Page.prototype, &#123;</span><br><span class="line">            init: function () &#123;</span><br><span class="line">                this.bindEvents()</span><br><span class="line">            &#125;,</span><br><span class="line">            bindEvents: function () &#123;</span><br><span class="line">                var btn &#x3D; $(&#39;#btn&#39;);</span><br><span class="line">                btn.on(&#39;click&#39;, $.proxy(this.handleBtnClick, this))</span><br><span class="line">            &#125;,</span><br><span class="line">            handleBtnClick: function () &#123;</span><br><span class="line">                var inputValue &#x3D; $(&quot;#input&quot;).val()</span><br><span class="line">                var ulElem &#x3D; $(&quot;#list&quot;);</span><br><span class="line">                ulElem.append(&#39;&lt;li&gt;&#39; + inputValue + &#39;&lt;&#x2F;li&#39;)</span><br><span class="line">                $(&quot;#input&quot;).val(&#39;&#39;)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line">        var page &#x3D; new Page();</span><br><span class="line">        page.init();</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="组件化改造ToDoList-父组件向子组件传值、局部组件与全局组件"><a href="#组件化改造ToDoList-父组件向子组件传值、局部组件与全局组件" class="headerlink" title="组件化改造ToDoList(父组件向子组件传值、局部组件与全局组件)"></a>组件化改造ToDoList(父组件向子组件传值、局部组件与全局组件)</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- 要想拿到输入框里的值，必须通过v-model给他双向绑定一个值，这样我们在vue实例中就能拿到这个值 --&gt;</span><br><span class="line">        &lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;inputValue&quot;&gt;</span><br><span class="line">        &lt;!-- 通过v-on:click绑定事件，点击后回去vue实例中找这个方法，并且自动执行该方法 --&gt;</span><br><span class="line">        &lt;button v-on:click&#x3D;&quot;handleBtnClick&quot;&gt;提交&lt;&#x2F;button&gt;</span><br><span class="line">        &lt;!-- &lt;ul&gt;</span><br><span class="line">            &#x2F;&#x2F; 通过for循环拿到list数组里的内容， 这里别忘了item加上&#123;&#123;&#125;&#125; item代表循环的每一项的内容</span><br><span class="line">            &lt;li v-for&#x3D;&quot;item in list&quot;&gt;&#123;&#123;item&#125;&#125;&lt;&#x2F;li&gt;</span><br><span class="line">        &lt;&#x2F;ul&gt; --&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!-- 组件的调用：首字母小写，用-隔开  --&gt;</span><br><span class="line">        &lt;!-- app相当于父组件，todo-item相当于子组件，父组件向子组件传值，子组件需要绑定一个v-bind --&gt;</span><br><span class="line">        &lt;ul&gt;</span><br><span class="line">            &lt;todo-item v-bind:content&#x3D;&quot;item&quot; v-for&#x3D;&quot;item in list&quot;&gt;&lt;&#x2F;todo-item&gt;</span><br><span class="line">        &lt;&#x2F;ul&gt;</span><br><span class="line"></span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line"></span><br><span class="line">        &#x2F;&#x2F; &#x2F;&#x2F; 生成全局组件:组件名首字母大写，并且使用组件时首字母小写并且用-隔开</span><br><span class="line">        &#x2F;&#x2F; Vue.component(&quot;TodoItem&quot;, &#123;</span><br><span class="line">        &#x2F;&#x2F;     &#x2F;&#x2F; 子组件通过props接收一个content参数，而content的值就是item</span><br><span class="line">        &#x2F;&#x2F;     props: [&#39;content&#39;],</span><br><span class="line">        &#x2F;&#x2F;     template: &quot;&lt;li&gt; &#123;&#123; content &#125;&#125; &lt;&#x2F;li&gt;&quot;</span><br><span class="line">        &#x2F;&#x2F; &#125;)</span><br><span class="line"></span><br><span class="line">        &#x2F;&#x2F;使用局部组件</span><br><span class="line">        var TodoItem &#x3D; &#123;</span><br><span class="line">            props: [&#39;content&#39;],</span><br><span class="line">            template: &#39;&lt;li&gt;&#123;&#123;content&#125;&#125;&lt;&#x2F;li&gt;&#39;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        var app &#x3D; new Vue(&#123;</span><br><span class="line">            el: &#39;#app&#39;,</span><br><span class="line">            &#x2F;&#x2F; 使用局部组件时，需要把局部组件在父组件中注册,注意components加s</span><br><span class="line">            components: &#123;</span><br><span class="line">                TodoItem: TodoItem</span><br><span class="line">            &#125;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                &#x2F;&#x2F; 与输入框绑定的inputValue对应，</span><br><span class="line">                &#x2F;&#x2F;修改vue实例中的值会影响输入框的inputValue，同样输入框的inputVlue值也会影响Vue实例中对应的值，</span><br><span class="line">                &#x2F;&#x2F;这就是双向绑定(将输入框的value值和vue实例中inputValue进行了绑定)。</span><br><span class="line">                inputValue: &#39;&#39;,</span><br><span class="line">                &#x2F;&#x2F; 定义了数组，用来存储li里面的内容</span><br><span class="line">                list: [&#39;第一课的内容&#39;, &#39;第二课的内容&#39;]</span><br><span class="line">            &#125;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                &#x2F;&#x2F; 点击按钮触发的事件</span><br><span class="line">                handleBtnClick: function () &#123;</span><br><span class="line">                    &#x2F;&#x2F; alert(this.inputValue)</span><br><span class="line">                    &#x2F;&#x2F; &#x2F;&#x2F; 这里为啥不是app.$data.inputValue呢？</span><br><span class="line">                    &#x2F;&#x2F; &#x2F;&#x2F;原因很简单，因为methods：是属于app这个vue实例的范围内的，所以直接用this.调用就行了，也不需要给data起别名</span><br><span class="line">                    this.list.push(this.inputValue)</span><br><span class="line">                    &#x2F;&#x2F; 这一步的作用是当用户输入完后自动地将输入框清空</span><br><span class="line">                    this.inputValue &#x3D; &#39;&#39;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">全局组件的定义：props接收绑定的值</span><br><span class="line">Vue.component(&quot;TodoItem&quot;, &#123;</span><br><span class="line">             &#x2F;&#x2F;子组件通过props接收一个content参数，而content的值就是item</span><br><span class="line">             props: [&#39;content&#39;],</span><br><span class="line">             template: &quot;&lt;li&gt; &#123;&#123; content &#125;&#125; &lt;&#x2F;li&gt;&quot;</span><br><span class="line">         &#125;)</span><br><span class="line"></span><br><span class="line">全局组件使用：v-bind绑定传递的值</span><br><span class="line">&lt;todo-item v-bind:content&#x3D;&quot;item&quot; v-for&#x3D;&quot;item in list&quot;&gt;&lt;&#x2F;todo-item&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">局部组件的定义：</span><br><span class="line">        var TodoItem &#x3D; &#123;</span><br><span class="line">            props: [&#39;content&#39;],</span><br><span class="line">            template: &#39;&lt;li&gt;&#123;&#123;content&#125;&#125;&lt;&#x2F;li&gt;&#39;</span><br><span class="line">        &#125;</span><br><span class="line">局部组件的使用：v-bind绑定传递的值</span><br><span class="line">&lt;todo-item v-bind:content&#x3D;&quot;item&quot; v-for&#x3D;&quot;item in list&quot;&gt;&lt;&#x2F;todo-item&gt;</span><br><span class="line">使用之前需要在父组件进行声明：</span><br><span class="line">components: &#123;</span><br><span class="line">                TodoItem: TodoItem</span><br><span class="line">            &#125;,</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="子组件向父组件传值，实现点击删除效果"><a href="#子组件向父组件传值，实现点击删除效果" class="headerlink" title="子组件向父组件传值，实现点击删除效果"></a>子组件向父组件传值，实现点击删除效果</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">1.子组件的模板添加一个删除事件</span><br><span class="line">template: &#39;&lt;li v-on:click&#x3D;&quot;handleItemClick&quot;&gt;&#123;&#123;content&#125;&#125;&lt;&#x2F;li&gt;&#39;,</span><br><span class="line">2.通过子组件对应的方法用$emit将delete传给父组件</span><br><span class="line">            methods: &#123;</span><br><span class="line">                handleItemClick: function () &#123;</span><br><span class="line">                    &#x2F;&#x2F; 子组件向父组件传递delete</span><br><span class="line">                    this.$emit(&quot;delete&quot;)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">子组件外面监听这个delete事件</span><br><span class="line">        &lt;ul&gt;</span><br><span class="line">            &lt;todo-item v-bind:content&#x3D;&quot;item&quot; v-for&#x3D;&quot;item in list&quot; @delete&#x3D;&quot;deleteItem&quot;&gt;&lt;&#x2F;todo-item&gt;</span><br><span class="line">        &lt;&#x2F;ul&gt;</span><br><span class="line">在父组件实例中写这个方法</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- 要想拿到输入框里的值，必须通过v-model给他双向绑定一个值，这样我们在vue实例中就能拿到这个值 --&gt;</span><br><span class="line">        &lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;inputValue&quot;&gt;</span><br><span class="line">        &lt;!-- 通过v-on:click绑定事件，点击后回去vue实例中找这个方法，并且自动执行该方法 --&gt;</span><br><span class="line">        &lt;button v-on:click&#x3D;&quot;handleBtnClick&quot;&gt;提交&lt;&#x2F;button&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!-- 组件的调用：首字母小写，用-隔开  --&gt;</span><br><span class="line">        &lt;!-- app相当于父组件，todo-item相当于子组件，父组件向子组件传值，子组件需要绑定一个v-bind --&gt;</span><br><span class="line">        &lt;ul&gt;</span><br><span class="line">            &lt;todo-item v-bind:content&#x3D;&quot;item&quot; v-for&#x3D;&quot;(item,index) in list&quot; @delete&#x3D;&quot;deleteItem&quot; v-bind:index&#x3D;&quot;index&quot;&gt;</span><br><span class="line">            &lt;&#x2F;todo-item&gt;</span><br><span class="line">        &lt;&#x2F;ul&gt;</span><br><span class="line"></span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line"></span><br><span class="line">        &#x2F;&#x2F;使用局部组件</span><br><span class="line">        var TodoItem &#x3D; &#123;</span><br><span class="line">            props: [&#39;content&#39;, &#39;index&#39;],</span><br><span class="line">            &#x2F;&#x2F; 1.给子组件添加一个点击触发事件</span><br><span class="line">            template: &#39;&lt;li v-on:click&#x3D;&quot;handleItemClick&quot;&gt;&#123;&#123;content&#125;&#125;&lt;&#x2F;li&gt;&#39;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                handleItemClick: function () &#123;</span><br><span class="line">                    &#x2F;&#x2F; 子组件向父组件传递delete</span><br><span class="line">                    this.$emit(&quot;delete&quot;, this.index)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        var app &#x3D; new Vue(&#123;</span><br><span class="line">            el: &#39;#app&#39;,</span><br><span class="line">            &#x2F;&#x2F; 使用局部组件时，需要把局部组件在父组件中注册,注意components加s</span><br><span class="line">            components: &#123;</span><br><span class="line">                TodoItem: TodoItem</span><br><span class="line">            &#125;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                &#x2F;&#x2F; 与输入框绑定的inputValue对应，</span><br><span class="line">                &#x2F;&#x2F;修改vue实例中的值会影响输入框的inputValue，同样输入框的inputVlue值也会影响Vue实例中对应的值，</span><br><span class="line">                &#x2F;&#x2F;这就是双向绑定(将输入框的value值和vue实例中inputValue进行了绑定)。</span><br><span class="line">                inputValue: &#39;&#39;,</span><br><span class="line">                &#x2F;&#x2F; 定义了数组，用来存储li里面的内容</span><br><span class="line">                list: [&#39;第一课的内容&#39;, &#39;第二课的内容&#39;]</span><br><span class="line">            &#125;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                &#x2F;&#x2F; 点击按钮触发的事件</span><br><span class="line">                handleBtnClick: function () &#123;</span><br><span class="line">                    &#x2F;&#x2F; alert(this.inputValue)</span><br><span class="line">                    &#x2F;&#x2F; &#x2F;&#x2F; 这里为啥不是app.$data.inputValue呢？</span><br><span class="line">                    &#x2F;&#x2F; &#x2F;&#x2F;原因很简单，因为methods：是属于app这个vue实例的范围内的，所以直接用this.调用就行了，也不需要给data起别名</span><br><span class="line">                    this.list.push(this.inputValue)</span><br><span class="line">                    &#x2F;&#x2F; 这一步的作用是当用户输入完后自动地将输入框清空</span><br><span class="line">                    this.inputValue &#x3D; &#39;&#39;</span><br><span class="line">                &#125;,</span><br><span class="line">                deleteItem: function (index) &#123;</span><br><span class="line">                    &#x2F;&#x2F; 如何实现删除？ splice：从传入的下标开始，删除一项</span><br><span class="line">                    this.list.splice(index, 1)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="总结-1"><a href="#总结-1" class="headerlink" title="总结"></a>总结</h2><ul>
<li>父组件如何给子组件传值：1.v-bind绑定 2.子组件props接收</li>
<li>子组件向父组件传值，1.通过$emit传值，如果传递的是事件，需要在子组件方法中向父组件监听事件；如果传递值，使用v-bind绑定，再在父组件监听事件中通过参数进行接收</li>
</ul>
<h2 id="vue实例"><a href="#vue实例" class="headerlink" title="vue实例"></a>vue实例</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 可以说VUE都是由vue实例来组成的，可以使用vm.$destroy()销毁当前vm组件,此时再对message进行修改也不会再生效 --&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;root&quot;&gt;</span><br><span class="line">        &lt;!-- 事件绑定 --&gt;</span><br><span class="line">        &lt;div v-on:click&#x3D;&quot;handleClick&quot;&gt;</span><br><span class="line">            &lt;!-- v-on可以换成@ --&gt;</span><br><span class="line">            &#123;&#123;message&#125;&#125;</span><br><span class="line">        &lt;&#x2F;div&gt;</span><br><span class="line">        &lt;!-- 全局组件调用 --&gt;</span><br><span class="line">        &lt;item&gt;&lt;&#x2F;item&gt;</span><br><span class="line"></span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line"></span><br><span class="line">        &#x2F;&#x2F; 全局组件</span><br><span class="line">        Vue.component(&#39;item&#39;, &#123;</span><br><span class="line">            template: &#39;&lt;div&gt;helloworld&lt;&#x2F;div&gt;&#39;</span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &#39;#root&#39;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                message: &#39;helloworld&#39;</span><br><span class="line">            &#125;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                handleClick: function () &#123;</span><br><span class="line">                    alert(&#39;hello&#39;)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="Vue生命周期钩子"><a href="#Vue生命周期钩子" class="headerlink" title="Vue生命周期钩子"></a>Vue生命周期钩子</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &#123;&#123;message&#125;&#125;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        &#x2F;&#x2F; 生命周期函数就是vue实例在某一个时间点自动执行的函数</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &#39;#app&#39;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                message: &quot;helloworld&quot;</span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">            &#x2F;&#x2F; 在初始化事件和生命周期后，会自动调用beforeCreate函数</span><br><span class="line">            beforeCreate: function () &#123;</span><br><span class="line">                console.log(&quot;beforeCreate&quot;);</span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">            &#x2F;&#x2F; 处理了外部注入和双向绑定后，自动调用created函数</span><br><span class="line">            created: function () &#123;</span><br><span class="line">                console.log(&quot;created&quot;)</span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">            &#x2F;&#x2F; 检测是否有template选项，如果没有，就会将el整体的内容当做他的模板进行渲染</span><br><span class="line">            &#x2F;&#x2F; 如果有template选项（子组件），就会按照模板进行渲染</span><br><span class="line">            &#x2F;&#x2F; 页面渲染之前会自动执行beforeMount</span><br><span class="line">            beforeMount: function () &#123;</span><br><span class="line">                &#x2F;&#x2F; console.log(this.$el);   &#x2F;&#x2F;&lt;div id&#x3D;&quot;app&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">                console.log(&quot;beforemount&quot;);</span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">            &#x2F;&#x2F; 将el挂载自实例上，自动执行mouted</span><br><span class="line">            mounted: function () &#123;</span><br><span class="line">                &#x2F;&#x2F; console.log(this.$el);  &#x2F;&#x2F;&lt;div id&#x3D;&quot;app&quot;&gt;helloworld&lt;&#x2F;div&gt;</span><br><span class="line">                console.log(&quot;mounted&quot;);</span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">            &#x2F;&#x2F; 当数据发生改变，还没重新渲染之前</span><br><span class="line">            &#x2F;&#x2F; 终端输入vm.message&#x3D;&quot;zzj&quot;</span><br><span class="line">            beforeUpdate: function () &#123;</span><br><span class="line">                console.log(&quot;beforeUpdate&quot;);</span><br><span class="line">            &#125;,</span><br><span class="line">            &#x2F;&#x2F; 当数据发生改变，数据重新渲染之后</span><br><span class="line">            updated: function () &#123;</span><br><span class="line">                console.log(&quot;updated&quot;);</span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">            &#x2F;&#x2F; 当组件被销毁时，会执行</span><br><span class="line">            &#x2F;&#x2F; 终端执行vm.$destroy()</span><br><span class="line">            beforeDestroy: function () &#123;</span><br><span class="line">                console.log(&quot;deforeDestroy&quot;);</span><br><span class="line">            &#125;,</span><br><span class="line">            &#x2F;&#x2F; 当组件被完全销毁时，会被执行</span><br><span class="line">            destroyed: function () &#123;</span><br><span class="line">                console.log(&quot;destroyed&quot;);</span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="VUE模板语法"><a href="#VUE模板语法" class="headerlink" title="VUE模板语法"></a>VUE模板语法</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- 第一种模板语法：插值表达式&#123;&#123;&#125;&#125; --&gt;</span><br><span class="line">        &#123;&#123;name&#125;&#125;</span><br><span class="line">        &lt;!-- 第二种模板语法v-text --&gt;</span><br><span class="line">        &lt;div v-text&#x3D;&quot;name&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">        &lt;!-- 第三种模板语法：v-html ,v-html可以渲染html代码--&gt;</span><br><span class="line">        &lt;div v-html&#x3D;&quot;name&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">        &lt;!-- v-on:click&#x3D;&quot;&quot; 和v-bind:title&#x3D;&quot;&quot;和v-model&#x3D;&quot;&quot;都是模板语法--&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &#39;#app&#39;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                name: &#39;&lt;h1&gt;dell&lt;&#x2F;h1&gt;&#39;</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="Vue计算属性、方法和侦听器"><a href="#Vue计算属性、方法和侦听器" class="headerlink" title="Vue计算属性、方法和侦听器"></a>Vue计算属性、方法和侦听器</h2><h3 id="计算属性和方法"><a href="#计算属性和方法" class="headerlink" title="计算属性和方法"></a>计算属性和方法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- 可以看到插值表达式中有一些逻辑，当我们不希望在插值表达式中有逻辑时，就可以使用计算属性 --&gt;</span><br><span class="line">        &lt;!-- &#123;&#123;firstName+&quot; &quot;+lastName&#125;&#125; --&gt;</span><br><span class="line">        &lt;!-- 当我们使用插值表达式时，首先会从data里面去找，如果找不到，就会去计算属性computed里面去找 --&gt;</span><br><span class="line">        &lt;!-- 可以把计算属性理解为和data里面一样的数据类型，只不过他的形式是类似方法function的 --&gt;</span><br><span class="line">        &#123;&#123;fullName&#125;&#125;</span><br><span class="line">        &#123;&#123;fullName&#125;&#125;</span><br><span class="line">        &lt;!-- 只会打印一次“计算了一次” --&gt;</span><br><span class="line"></span><br><span class="line">        &#123;&#123;fullName2()&#125;&#125;</span><br><span class="line">        &#123;&#123;fullName2()&#125;&#125;</span><br><span class="line">        &lt;!-- 打印两次 --&gt;</span><br><span class="line"></span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &#39;#app&#39;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                firstName: &quot;Dell&quot;,</span><br><span class="line">                lastName: &quot;Lee&quot;,</span><br><span class="line">            &#125;,</span><br><span class="line">            &#x2F;&#x2F; 2.vue方法</span><br><span class="line">            methods: &#123;</span><br><span class="line">                fullName2: function () &#123;</span><br><span class="line">                    console.log(&quot;方法没有缓存，会执行多次&quot;);</span><br><span class="line">                    return this.firstName + this.lastName</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">            &#x2F;&#x2F; 1.计算属性computed：特点是内置缓存的，当我们计算一次后，下次计算就会直接拿到结果，提高了性能。而v-if&#x2F;方法，没有缓存功能。所以对于需要频繁修改的数据，使用计算属性computed</span><br><span class="line">            computed: &#123;</span><br><span class="line">                fullName: function () &#123;</span><br><span class="line">                    &#x2F;&#x2F; 只会打印一次，因为计算属性具有缓存</span><br><span class="line">                    console.log(&quot;计算属性有缓存，渲染时会直接拿到结果&quot;);</span><br><span class="line">                    return this.firstName + this.lastName</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="侦听器"><a href="#侦听器" class="headerlink" title="侦听器"></a>侦听器</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- &#123;&#123;firstName+&quot; &quot;+lastName&#125;&#125; --&gt;</span><br><span class="line">        &#123;&#123;fullName&#125;&#125;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &#39;#app&#39;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                firstName: &quot;Dell&quot;,</span><br><span class="line">                lastName: &quot;Lee&quot;,</span><br><span class="line">                fullName: &quot;Dell Lee&quot;</span><br><span class="line">            &#125;,</span><br><span class="line">            watch: &#123;</span><br><span class="line">                &#x2F;&#x2F; 侦听器监听firstName，当firstName发生改变时，就对fullName重新赋值</span><br><span class="line">                firstName: function () &#123;</span><br><span class="line">                    this.fullName &#x3D; this.firstName + this.lastName;</span><br><span class="line">                &#125;,</span><br><span class="line">                &#x2F;&#x2F; 侦听器监听lastName，当lastName发生改变时，就对fullName重新赋值</span><br><span class="line">                lastName: function () &#123;</span><br><span class="line">                    this.fullName &#x3D; this.firstName + this.lastName;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="vue中的样式绑定之class对象绑定"><a href="#vue中的样式绑定之class对象绑定" class="headerlink" title="vue中的样式绑定之class对象绑定"></a>vue中的样式绑定之class对象绑定</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        .activated &#123;</span><br><span class="line">            color: red</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;&#x2F;style&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- class的对象绑定，通过isActivated控制activted样式是否显示 --&gt;</span><br><span class="line">        &lt;div @click&#x3D;&quot;handleDivClick&quot; :class&#x3D;&quot;&#123;activated :isActivated&#125;&quot;&gt;helloworld&lt;&#x2F;div&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &#39;#app&#39;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                isActivated: false</span><br><span class="line">            &#125;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                handleDivClick: function () &#123;</span><br><span class="line">                    this.isActivated &#x3D; !this.isActivated</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="vue中的样式绑定之class数组绑定"><a href="#vue中的样式绑定之class数组绑定" class="headerlink" title="vue中的样式绑定之class数组绑定"></a>vue中的样式绑定之class数组绑定</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        .activated &#123;</span><br><span class="line">            color: red</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        .fontSize &#123;</span><br><span class="line">            font-size: 100px;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;&#x2F;style&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- 数组里面可以放多个样式类 --&gt;</span><br><span class="line">        &lt;div @click&#x3D;&quot;handleDivClick&quot; :class&#x3D;&quot;[activated,fontSize]&quot;&gt;helloworld&lt;&#x2F;div&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &#39;#app&#39;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                activated: &#39;&#39;,</span><br><span class="line">                fontSize: &#39;&#39;</span><br><span class="line">            &#125;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                &#x2F;&#x2F; 点击后，相当于从class&#x3D;&quot;&quot;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&gt;class&#x3D;&quot;activated&quot;</span><br><span class="line">                handleDivClick: function () &#123;</span><br><span class="line">                    &#x2F;&#x2F; 实现连点切换</span><br><span class="line">                    if (this.activated &#x3D;&#x3D;&#x3D; &quot;activated&quot;) &#123;</span><br><span class="line">                        this.activated &#x3D; &quot;&quot;</span><br><span class="line">                    &#125; else &#123;</span><br><span class="line">                        this.activated &#x3D; &quot;activated&quot;</span><br><span class="line">                        this.fontSize &#x3D; &quot;fontSize&quot;</span><br><span class="line">                    &#125;</span><br><span class="line"></span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="vue样式绑定之Style绑定"><a href="#vue样式绑定之Style绑定" class="headerlink" title="vue样式绑定之Style绑定"></a>vue样式绑定之Style绑定</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &#x2F;&#x2F; 通过对象绑定</span><br><span class="line">        &lt;div @click&#x3D;&quot;handleDivClick&quot; :style&#x3D;&quot;styleObj&quot;&gt;helloworld&lt;&#x2F;div&gt;</span><br><span class="line">        &#x2F;&#x2F; 通过数组绑定</span><br><span class="line">        &lt;div @click&#x3D;&quot;handleDivClick&quot; :style&#x3D;&quot;[styleObj,&#123;fontSize:&#39;20px&#39;&#125;]&quot;&gt;helloworld&lt;&#x2F;div&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &#39;#app&#39;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                styleObj: &#123;</span><br><span class="line">                    &#x2F;&#x2F; 这里注意两边都要加上引号，注意注意注意！！！</span><br><span class="line">                    color: &quot;red&quot;,</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                handleDivClick: function () &#123;</span><br><span class="line">                    &#x2F;&#x2F; 实现连点切换</span><br><span class="line">                    this.styleObj.color &#x3D; this.styleObj.color &#x3D;&#x3D;&#x3D; &quot;red&quot; ? &quot;black&quot; : &quot;red&quot;;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="vue条件渲染（v-if和v-for）"><a href="#vue条件渲染（v-if和v-for）" class="headerlink" title="vue条件渲染（v-if和v-for）"></a>vue条件渲染（v-if和v-for）</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- v-if和v-show都可以用来控制标签的显示与隐藏， --&gt;</span><br><span class="line">        &lt;!-- 区别在于v-if决定页面元素是否被渲染到页面上，而v-show已经将元素渲染到页面上了，只是通过display：none将元素进行了隐藏 --&gt;</span><br><span class="line">        &lt;!-- 若要经常使一个DOM元素隐藏或者显示，就需要使用v-show，因为它不会频繁的将一个元素添加删除 --&gt;</span><br><span class="line">        &lt;div v-if&#x3D;&quot;show &#x3D;&#x3D;&#x3D; &#39;a&#39;&quot;&gt;this is a&lt;&#x2F;div&gt;</span><br><span class="line">        &lt;div v-else-if&#x3D;&quot;show&#x3D;&#39;b&#39;&quot;&gt;this is b&lt;&#x2F;div&gt;</span><br><span class="line">        &lt;!-- v-if和v-else必须贴在一起使用 --&gt;</span><br><span class="line">        &lt;div v-else&gt;Bye World&lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">        &lt;div v-show&#x3D;&quot;show&quot;&gt;&#123;&#123;message&#125;&#125;&lt;&#x2F;div&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &#39;#app&#39;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                show: &quot;a&quot;,</span><br><span class="line">                message: &quot;hello&quot;</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="key值的使用"><a href="#key值的使用" class="headerlink" title="key值的使用"></a>key值的使用</h2><h2 id="vue在对页面进行重新渲染时，会尽量的复用相同的代码，添加key值可以是vue重新渲染相同的代码"><a href="#vue在对页面进行重新渲染时，会尽量的复用相同的代码，添加key值可以是vue重新渲染相同的代码" class="headerlink" title="vue在对页面进行重新渲染时，会尽量的复用相同的代码，添加key值可以是vue重新渲染相同的代码"></a>vue在对页面进行重新渲染时，会尽量的复用相同的代码，添加key值可以是vue重新渲染相同的代码</h2><p><img src="https://i.loli.net/2020/09/18/cjWn8ozbPuS4sgv.png" alt="image-20200918114952807"></p>
<p><img src="https://i.loli.net/2020/09/18/6mqfX7IonTjGe1c.png" alt="image-20200918114925977"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!-- 重新渲染，input框的内容不变，所以需要增加key值 --&gt;</span><br><span class="line">        &lt;div v-if&#x3D;&quot;show&quot;&gt;</span><br><span class="line">            用户名：&lt;input type&#x3D;&quot;text&quot; :key&#x3D;&quot;username&quot;&gt;</span><br><span class="line">        &lt;&#x2F;div&gt;</span><br><span class="line">        &lt;div v-else&gt;</span><br><span class="line">            密码：&lt;input type&#x3D;&quot;text&quot; :key&#x3D;&quot;password&quot;&gt;</span><br><span class="line">        &lt;&#x2F;div&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &#39;#app&#39;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                show: false,</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="vue中的列表渲染（-key、对数组元素进行修改、对对象进行遍历v-for-“item-of-xxx”）"><a href="#vue中的列表渲染（-key、对数组元素进行修改、对对象进行遍历v-for-“item-of-xxx”）" class="headerlink" title="vue中的列表渲染（:key、对数组元素进行修改、对对象进行遍历v-for=“item of xxx”）"></a>vue中的列表渲染（:key、对数组元素进行修改、对对象进行遍历v-for=“item of xxx”）</h2><p><img src="https://i.loli.net/2020/09/18/N91pIB2PwKnJdOG.png" alt="image-20200918120752022"></p>
<p><img src="https://i.loli.net/2020/09/18/vSMdye7nTAK6k4r.png" alt="image-20200918120853630"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- 为了提升循环显示的性能，我们一般在每一个循环上加一个惟一的key值 --&gt;</span><br><span class="line">        &lt;div v-for&#x3D;&quot;(item,index) in list&quot; :key&#x3D;&quot;item.id&quot;&gt;&#123;&#123;item.text&#125;&#125;-------------&#123;&#123;index&#125;&#125;&lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!-- 当我们想要向VUE数组中添加元素是，不能使用数组下标的方式实现，如vm.list[4]&#x3D;&#123;id:&quot;002&quot;,text:&quot;sasqs&quot;&#125;，因为虽然实际上已经添加进数组里，但是不会被渲染到页面上 --&gt;</span><br><span class="line">        &lt;!-- 所以我们要使用数组自己的push方法添加数组元素，这样才会被渲染到页面上。 --&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!-- pop、push、unshift、shift、splice、sort、reverse --&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        &lt;!-- 对象的遍历使用ofkey代表键--&gt;</span><br><span class="line">        &lt;div v-for&#x3D;&quot;(item,key,index) of userInfo&quot;&gt;&#123;&#123;item&#125;&#125;-------&#123;&#123;key&#125;&#125;--------&#123;&#123;index&#125;&#125;&lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &quot;#app&quot;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                list: [&#123;</span><br><span class="line">                    id: &quot;010201318&quot;,</span><br><span class="line">                    text: &quot;hello&quot;,</span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    id: &quot;010201317&quot;,</span><br><span class="line">                    text: &quot;dell&quot;</span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    id: &quot;010201315&quot;,</span><br><span class="line">                    text: &quot;nice&quot;,</span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    id: &quot;014201318&quot;,</span><br><span class="line">                    text: &quot;meet&quot;,</span><br><span class="line">                &#125;],</span><br><span class="line"></span><br><span class="line">                userInfo: &#123;</span><br><span class="line">                    username: &quot;zzj&quot;,</span><br><span class="line">                    age: 20,</span><br><span class="line">                    sex: &quot;male&quot;,</span><br><span class="line"></span><br><span class="line">                &#125;</span><br><span class="line"></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="Vue中的set方法（对对象进行修改）"><a href="#Vue中的set方法（对对象进行修改）" class="headerlink" title="Vue中的set方法（对对象进行修改）"></a>Vue中的set方法（对对象进行修改）</h2><p><img src="https://i.loli.net/2020/09/18/vNTHR7Zxob6IpCM.png" alt="image-20200918125311056"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- 对象的遍历使用of,key代表键--&gt;</span><br><span class="line">        &lt;div v-for&#x3D;&quot;(item,key,index) of userInfo&quot;&gt;&#123;&#123;item&#125;&#125;-------&#123;&#123;key&#125;&#125;--------&#123;&#123;index&#125;&#125;&lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &quot;#app&quot;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                userInfo: &#123;</span><br><span class="line">                    username: &quot;zzj&quot;,</span><br><span class="line">                    age: 20,</span><br><span class="line">                    sex: &quot;male&quot;,</span><br><span class="line">                &#125;</span><br><span class="line"></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="vue的set方法改变数组元素"><a href="#vue的set方法改变数组元素" class="headerlink" title="vue的set方法改变数组元素"></a>vue的set方法改变数组元素</h2><p><img src="https://i.loli.net/2020/09/18/4ER6rJVpvydKPix.png" alt="image-20200918130150083"></p>
<h2 id="Vue中的事件处理-amp-amp-VUE中的事件修饰符（-stop、-prevent、-self、-capture和鼠标按键修饰符）"><a href="#Vue中的事件处理-amp-amp-VUE中的事件修饰符（-stop、-prevent、-self、-capture和鼠标按键修饰符）" class="headerlink" title="Vue中的事件处理&amp;&amp;VUE中的事件修饰符（.stop、.prevent、.self、.capture和鼠标按键修饰符）"></a>Vue中的事件处理&amp;&amp;VUE中的事件修饰符（.stop、.prevent、.self、.capture和鼠标按键修饰符）</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- 事件绑定由两种写法，一种不加括号，一种加上括号。  但是要想获得事件对象，就需要在括号的参数里面加上$event参数，这样就能获取事件对象 --&gt;</span><br><span class="line">        &lt;!-- &lt;button @click&#x3D;&quot;handleClick&quot;&gt;Button&lt;&#x2F;button&gt; --&gt;</span><br><span class="line">        &lt;!-- 通过()不仅可以获得当前事件对象，还可以获得传递过来的参数 --&gt;</span><br><span class="line">        &lt;button @click&#x3D;&quot;handleClick($event,1,2,3)&quot;&gt;Button&lt;&#x2F;button&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        &lt;!-- 事件修饰符之 阻止默认行为 .prevent 相当于原生js中的preventDefault--&gt;</span><br><span class="line">        &lt;form action&#x3D;&quot;&#x2F;app.html&quot; @click.prevent&gt;</span><br><span class="line">            &lt;!-- 默认情况下我们点击提交会跳转到app.html，但是如果我们不想跳转，就需要添加阻止默认行为修饰符 --&gt;</span><br><span class="line">            &lt;input type&#x3D;&quot;submit&quot; &#x2F;&gt;</span><br><span class="line">        &lt;&#x2F;form&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!-- 事件修饰符之 阻止冒泡行为.stop 相当于原生JS中的stopPropagation --&gt;</span><br><span class="line">        &lt;!-- .self代表只有点击自身才会触发自己的事件，也可以用来阻止冒泡 --&gt;</span><br><span class="line">        &lt;!-- .once代表事件只会触发一次 --&gt;</span><br><span class="line">        &lt;div @click.self.once&#x3D;&quot;handle&quot;&gt;</span><br><span class="line">            self</span><br><span class="line">            &lt;!-- 当我点击hello时，触发了父元素的点击事件，这就是冒泡。  --&gt;</span><br><span class="line">            &lt;div&gt;hello&lt;&#x2F;div&gt;</span><br><span class="line">        &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        &lt;!-- 事件冒泡与事件捕获(.capture)的区别:事件冒泡是从内向外：inner--outer，而事件捕获是从外向内：outer-inner --&gt;</span><br><span class="line">        &lt;div @click.capture&#x3D;&quot;handle&quot;&gt;</span><br><span class="line">            &lt;div @click.capture&#x3D;&quot;handle2&quot;&gt;hello&lt;&#x2F;div&gt;</span><br><span class="line">        &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!-- 按键修饰符 --&gt;</span><br><span class="line">        &lt;!-- 按下enter键时，触发handleKeyDown事件 --&gt;</span><br><span class="line">        &lt;input @keydown.enter&#x3D;&quot;handleKeyDown&quot; &#x2F;&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!-- 鼠标按键修饰符 .right:鼠标右键点击触发 .left：鼠标左键点击 .middle：鼠标中键点击--&gt;</span><br><span class="line">        &lt;div @click.middle&#x3D;&quot;handleClick2&quot;&gt;click&lt;&#x2F;div&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &quot;#app&quot;,</span><br><span class="line">            data: &#123;</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                handleClick: function (e, one, two, three) &#123;</span><br><span class="line">                    console.log(e, one, two, three);</span><br><span class="line">                &#125;,</span><br><span class="line">                handle: function () &#123;</span><br><span class="line">                    alert(&quot;outer&quot;)</span><br><span class="line">                &#125;,</span><br><span class="line">                handle2: function () &#123;</span><br><span class="line">                    alert(&quot;inner&quot;)</span><br><span class="line">                &#125;,</span><br><span class="line">                handleKeyDown: function (e) &#123;</span><br><span class="line">                    &#x2F;&#x2F; e.target：获取当前事件的对象，回车后打印文本框里的内容</span><br><span class="line">                    console.log(e.target.value);</span><br><span class="line">                &#125;,</span><br><span class="line">                handleClick2: function () &#123;</span><br><span class="line">                    alert(&quot;鼠标点击事件&quot;)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="Vue中的表单绑定（v-model）表单修饰符：trim-number-lazy"><a href="#Vue中的表单绑定（v-model）表单修饰符：trim-number-lazy" class="headerlink" title="Vue中的表单绑定（v-model）表单修饰符：trim number lazy"></a>Vue中的表单绑定（v-model）表单修饰符：trim number lazy</h2><h2 id=""><a href="#" class="headerlink" title=""></a><!-- v-model除了可以用在input上，还可以用在textarea、checkbox、radio、select --></h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- v-model除了可以用在input上，还可以用在textarea、checkbox、radio、select --&gt;</span><br><span class="line">        &lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;value&quot; &#x2F;&gt;</span><br><span class="line">        &#123;&#123;value&#125;&#125;</span><br><span class="line"></span><br><span class="line">        &lt;input type&#x3D;&quot;textarea&quot; v-model&#x3D;&quot;value&quot; &#x2F;&gt;</span><br><span class="line">        &#123;&#123;value&#125;&#125;</span><br><span class="line"></span><br><span class="line">        &lt;input type&#x3D;&quot;checkbox&quot; v-model&#x3D;&quot;value&quot; &#x2F;&gt;</span><br><span class="line">        &#123;&#123;value&#125;&#125;</span><br><span class="line"></span><br><span class="line">        &lt;input type&#x3D;&quot;radio&quot; value&#x3D;&quot;radio&quot; v-model&#x3D;&quot;value&quot; &#x2F;&gt;</span><br><span class="line">        &#123;&#123;value&#125;&#125;</span><br><span class="line"></span><br><span class="line">        &lt;select v-model&#x3D;&quot;value&quot;&gt;</span><br><span class="line">            &lt;option disabled&gt;----请选择-------&lt;&#x2F;option&gt;</span><br><span class="line">            &lt;option value&#x3D;&quot;1&quot;&gt;A&lt;&#x2F;option&gt;</span><br><span class="line">            &lt;option value&#x3D;&quot;2&quot;&gt;B&lt;&#x2F;option&gt;</span><br><span class="line">            &lt;option value&#x3D;&quot;3&quot;&gt;C&lt;&#x2F;option&gt;</span><br><span class="line">        &lt;&#x2F;select&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!-- 表单修饰符trim、number、lazy --&gt;</span><br><span class="line">        &lt;!-- lazy：当鼠标失去焦点时，渲染value的值 --&gt;</span><br><span class="line">        &lt;input type&#x3D;&quot;text&quot; v-model.lazy&#x3D;&quot;value&quot;&gt;</span><br><span class="line">        &#123;&#123;value&#125;&#125;</span><br><span class="line"></span><br><span class="line">        &lt;!-- input输入框的内容都是字符串型的，使用.number可以在我们输入数字时自动将字符串类型的数字转化为Number型的数字 --&gt;</span><br><span class="line">        &lt;input type&#x3D;&quot;text&quot; v-model.number&#x3D;&quot;value&quot;&gt;</span><br><span class="line">        &#123;&#123;value&#125;&#125;</span><br><span class="line"></span><br><span class="line">        &lt;!-- trim：删除前后的空格 --&gt;</span><br><span class="line">        &lt;input type&#x3D;&quot;text&quot; v-model.trim&#x3D;&quot;value&quot;&gt;</span><br><span class="line">        &#123;&#123;value&#125;&#125;</span><br><span class="line"></span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &quot;#app&quot;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                value: &quot;&quot;,</span><br><span class="line">            &#125;,</span><br><span class="line">            &#x2F;&#x2F; 监听value的值，当值发生改变时，监听他的类型</span><br><span class="line">            watch: &#123;</span><br><span class="line">                value: function () &#123;</span><br><span class="line">                    console.log(typeof this.value);</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="组件使用细节之is-“子组件”-同样适用于ul、table、ol、select"><a href="#组件使用细节之is-“子组件”-同样适用于ul、table、ol、select" class="headerlink" title="组件使用细节之is=“子组件”(同样适用于ul、table、ol、select)"></a>组件使用细节之is=“子组件”(同样适用于ul、table、ol、select)</h2><p><img src="https://i.loli.net/2020/09/18/VXczQ1oZi6pEqUf.png" alt="image-20200918172528592"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;table&gt;</span><br><span class="line">            &lt;!-- 看上去table里面子组件写法没有问题，但是table里面只能放tr，所以row不在table里面 需要使用is&#x3D;&quot;子组件名&quot;--&gt;</span><br><span class="line">            &lt;tbody&gt;</span><br><span class="line">                &lt;tr is&#x3D;&quot;row&quot;&gt;&lt;&#x2F;tr&gt;</span><br><span class="line">                &lt;tr is&#x3D;&quot;row&quot;&gt;&lt;&#x2F;tr&gt;</span><br><span class="line">                &lt;tr is&#x3D;&quot;row&quot;&gt;&lt;&#x2F;tr&gt;</span><br><span class="line">            &lt;&#x2F;tbody&gt;</span><br><span class="line">        &lt;&#x2F;table&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        Vue.component(&#39;row&#39;, &#123;</span><br><span class="line">            &#x2F;&#x2F; 子组件的data是一个函数，而不是对象，这点要同vm区分开来</span><br><span class="line">            data() &#123;</span><br><span class="line">                return &#123;</span><br><span class="line">                    content: &quot;this is a row&quot;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            template: &#39;&lt;tr&gt;&lt;td&gt;&#123;&#123;content&#125;&#125;&lt;&#x2F;td&gt;&lt;&#x2F;tr&gt;&#39;</span><br><span class="line">        &#125;)</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &quot;#app&quot;,</span><br><span class="line">            data: &#123;</span><br><span class="line"></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="vue中的ref引用（在vue中操作DOM来解决一些复杂的问题）"><a href="#vue中的ref引用（在vue中操作DOM来解决一些复杂的问题）" class="headerlink" title="vue中的ref引用（在vue中操作DOM来解决一些复杂的问题）"></a>vue中的ref引用（在vue中操作DOM来解决一些复杂的问题）</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- 给div起一个引用的名字，叫做reference --&gt;</span><br><span class="line">        &lt;div ref&#x3D;&quot;reference&quot; @click&#x3D;&quot;handle&quot;&gt;hello&lt;&#x2F;div&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &quot;#app&quot;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                &#x2F;&#x2F; 希望div被点击的时候，div里面的内容被打印出来</span><br><span class="line">                handle: function () &#123;</span><br><span class="line">                    &#x2F;&#x2F; this.$refs.reference就能拿到div的DOM节点，之后就能拿到他的innerHTML</span><br><span class="line">                    alert(this.$refs.reference.innerHTML);</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="对Vue中得组件使用ref引用，拿到的就是该组件的引用"><a href="#对Vue中得组件使用ref引用，拿到的就是该组件的引用" class="headerlink" title="对Vue中得组件使用ref引用，拿到的就是该组件的引用"></a>对Vue中得组件使用ref引用，拿到的就是该组件的引用</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- 触发change事件 --&gt;</span><br><span class="line">        &lt;counter ref&#x3D;&quot;one&quot; @change&#x3D;&quot;handleChange&quot;&gt;&lt;&#x2F;counter&gt;</span><br><span class="line">        &lt;counter ref&#x3D;&quot;two&quot; @change&#x3D;&quot;handleChange&quot;&gt;&lt;&#x2F;counter&gt;</span><br><span class="line">        &lt;!-- 实现对两个counter总数的计算 --&gt;</span><br><span class="line">        &lt;div&gt;&#123;&#123;total&#125;&#125;&lt;&#x2F;div&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        Vue.component(&quot;counter&quot;, &#123;</span><br><span class="line">            &#x2F;&#x2F; 点击实现自增</span><br><span class="line">            template: &quot;&lt;div @click&#x3D;&#39;handleClick&#39;&gt;&#123;&#123;number&#125;&#125;&lt;&#x2F;div&gt;&quot;,</span><br><span class="line">            &#x2F;&#x2F; 子组件的数据是函数，注意注意！！！</span><br><span class="line">            data() &#123;</span><br><span class="line">                return &#123;</span><br><span class="line">                    number: 0</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                handleClick: function () &#123;</span><br><span class="line">                    this.number++</span><br><span class="line">                    &#x2F;&#x2F; 当子组件触发点击事件时，子组件向父组件传递change事件</span><br><span class="line">                    this.$emit(&#39;change&#39;)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;)</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &quot;#app&quot;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                total: 0</span><br><span class="line">            &#125;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                &#x2F;&#x2F; 当子组件被点击时，都能触发handleChange这个事件</span><br><span class="line">                handleChange: function () &#123;</span><br><span class="line">                    &#x2F;&#x2F; 这样就能拿到每一个组件里面的number值</span><br><span class="line">                    console.log(this.$refs.one.number);</span><br><span class="line">                    console.log(this.$refs.two.number);</span><br><span class="line"></span><br><span class="line">                    this.total &#x3D; this.$refs.one.number + this.$refs.two.number</span><br><span class="line"></span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="ref总结"><a href="#ref总结" class="headerlink" title="ref总结"></a>ref总结</h2><ul>
<li>ref对标签使用获取的是标签的DOM（.$refs.引用名）</li>
<li>ref对子组件使用获取的是当前组件的引用（.$refs.引用名）</li>
</ul>
<h2 id="父子组件传值"><a href="#父子组件传值" class="headerlink" title="父子组件传值"></a>父子组件传值</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">父组件通过属性的形式向子组件传值</span><br><span class="line">子组件向父组件传值通过事件的形式</span><br><span class="line">父子组件传值需要遵循单向数据流的规定，父组件传给子组件的值，子组件不能修改</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- 父组件通过属性的形式向子组件传值 --&gt;</span><br><span class="line">        &lt;!-- count与:count的区别，加冒号父组件传给子组件的是数字，不叫冒号传递的是字符串 --&gt;</span><br><span class="line">        &lt;counter :count&#x3D;&quot;2&quot; @inc&#x3D;&quot;handleIncrease&quot;&gt;&lt;&#x2F;counter&gt;</span><br><span class="line">        &lt;counter :count&#x3D;&quot;3&quot; @inc&#x3D;&quot;handleIncrease&quot;&gt;&lt;&#x2F;counter&gt;</span><br><span class="line">        &#123;&#123;total&#125;&#125;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        &#x2F;&#x2F; 1.先定义一个局部子组件</span><br><span class="line">        var counter &#x3D; &#123;</span><br><span class="line">            props: [&quot;count&quot;],</span><br><span class="line">            data() &#123;</span><br><span class="line">                return &#123;</span><br><span class="line">                    number: this.count</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#x2F;&#x2F; template: &quot;&lt;div @click&#x3D;&#39;handleClick&#39;&gt;&#123;&#123;count&#125;&#125;&lt;&#x2F;div&gt;&quot;,</span><br><span class="line">            template: &quot;&lt;div @click&#x3D;&#39;handleClick&#39;&gt;&#123;&#123;number&#125;&#125;&lt;&#x2F;div&gt;&quot;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                handleClick: function () &#123;</span><br><span class="line">                    &#x2F;&#x2F; this.count++  虽然在子组件直接操作父组件传递过来的值也能够实现自增的效果，</span><br><span class="line">                    &#x2F;&#x2F; 但是子组件只能用这个内容而不能修改这个内容，这就是VUE中的单向数据流的概念</span><br><span class="line"></span><br><span class="line">                    &#x2F;&#x2F; 解决方法：在子组件定义一个number，复制接收到的count的值，在插值表达式里使用number代替count</span><br><span class="line">                    this.number++</span><br><span class="line">                    this.$emit(&#39;inc&#39;, 1)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &quot;#app&quot;,</span><br><span class="line">            &#x2F;&#x2F; 2.再在父组件中注册该子组件</span><br><span class="line">            components: &#123;</span><br><span class="line">                counter: counter</span><br><span class="line">            &#125;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                total: 5</span><br><span class="line">            &#125;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                &#x2F;&#x2F; step就是子组件向父组件通过事件传递的参数，此处为1</span><br><span class="line">                handleIncrease: function (step) &#123;</span><br><span class="line">                    alert(step)</span><br><span class="line">                    this.total +&#x3D; step</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<h2 id="组件的参数校验和非props特性"><a href="#组件的参数校验和非props特性" class="headerlink" title="组件的参数校验和非props特性"></a>组件的参数校验和非props特性</h2><p>props特性：<code>&lt;child content=&quot;hello world&quot;&gt;&lt;/child&gt;</code>向子组件传递content，子组件的props中有content与之对应，这样子组件就能通过<code>&#123;&#123;content&#125;&#125;</code>或者<code>this.content</code>拿到这个值。<br><img src="https://i.loli.net/2020/09/18/lnpHIWJTA7vey6N.png" alt="image-20200918231835318"></p>
<blockquote>
<p>非Props特性：父组件向子组件传递content值，但是子组件没有props接收这个值，此时使用content就会报错，同时<code>&lt;child content=&quot;hello world&quot;&gt;&lt;/child&gt;</code>显示在DOM中</p>
</blockquote>
<p><img src="https://i.loli.net/2020/09/18/m32e7bpaDQFs1rH.png" alt="image-20200918232058161"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;child content&#x3D;&quot;hello world&quot;&gt;&lt;&#x2F;child&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        &#x2F;&#x2F; 1.定义一个子组件</span><br><span class="line">        Vue.component(&quot;child&quot;, &#123;</span><br><span class="line">            &#x2F;&#x2F; props: [&#39;content&#39;],</span><br><span class="line">            props: &#123;</span><br><span class="line">                &#x2F;&#x2F; 接受类型检测</span><br><span class="line">                &#x2F;&#x2F;content:String   &#x2F;&#x2F;参数检验：子组件接收到的content必须是String</span><br><span class="line">                &#x2F;&#x2F;content:[Number,String]  &#x2F;&#x2F; 传过来的参数要么是字符串，要么是数字</span><br><span class="line">                &#x2F;&#x2F; 更复杂的形式</span><br><span class="line">                content: &#123;</span><br><span class="line">                    type: String,</span><br><span class="line">                    required: true,&#x2F;&#x2F; 必须传递content给子组件</span><br><span class="line">                    default: &quot;default value&quot;,  &#x2F;&#x2F; 不传content是默认content的值默认是default value</span><br><span class="line">                    validator: function (value) &#123;  &#x2F;&#x2F; 传入的content长度必须大于5</span><br><span class="line">                        return (value.length &gt; 5)</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            template: &quot;&lt;div&gt;Child&lt;&#x2F;div&gt;&quot;</span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &quot;#app&quot;,</span><br><span class="line">            data: &#123;</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="vue中定义原生事件-native"><a href="#vue中定义原生事件-native" class="headerlink" title="vue中定义原生事件.native"></a>vue中定义原生事件.native</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- 在子组件标签中定义点击事件是没用的 --&gt;</span><br><span class="line">        &lt;child @click&#x3D;&quot;handleClick&quot;&gt;&lt;&#x2F;child&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!-- 但是我们可以使用.native将自定义事件click变为原生点击事件 --&gt;</span><br><span class="line">        &lt;child @click.native&#x3D;&quot;handleClick&quot;&gt;&lt;&#x2F;child&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        Vue.component(&#39;child&#39;, &#123;</span><br><span class="line">            &#x2F;&#x2F; 在template中定义事件</span><br><span class="line">            template: &#39;&lt;div @click&#x3D;&quot;handleChildClick&quot;&gt;child&lt;&#x2F;div&gt;&#39;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                handleChildClick: function () &#123;</span><br><span class="line">                    alert(&quot;child click&quot;)</span><br><span class="line">                    &#x2F;&#x2F; 想要触发父组件的handleClick事件，就得向父组件传递Click事件</span><br><span class="line">                    this.$emit(&quot;click&quot;)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &quot;#app&quot;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                handleClick: function () &#123;</span><br><span class="line">                    alert(&quot;aaa&quot;)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="vue非父子组件之间的传值（发布-订阅模式-Bus-总线）"><a href="#vue非父子组件之间的传值（发布-订阅模式-Bus-总线）" class="headerlink" title="vue非父子组件之间的传值（发布-订阅模式/Bus/总线）"></a>vue非父子组件之间的传值（发布-订阅模式/Bus/总线）</h2><h2 id="在Vue中使用插槽slot（使用插槽可以向子组件优雅的传递DOM结构）"><a href="#在Vue中使用插槽slot（使用插槽可以向子组件优雅的传递DOM结构）" class="headerlink" title="在Vue中使用插槽slot（使用插槽可以向子组件优雅的传递DOM结构）"></a>在Vue中使用插槽slot（使用插槽可以向子组件优雅的传递DOM结构）</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- &lt;child content&#x3D;&quot;&lt;p&gt;Dell&lt;&#x2F;p&gt;&quot;&gt;&lt;&#x2F;child&gt; --&gt;</span><br><span class="line">        &lt;!-- 使用插槽可以向子组件优雅的传递DOM结构 --&gt;</span><br><span class="line">        &lt;child&gt;</span><br><span class="line">            &lt;!-- 向子组件插入p标签 --&gt;</span><br><span class="line">            &lt;p&gt;Dell&lt;&#x2F;p&gt;</span><br><span class="line">        &lt;&#x2F;child&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        Vue.component(&#39;child&#39;, &#123;</span><br><span class="line">            props: [&#39;content&#39;],</span><br><span class="line">            &#x2F;&#x2F; 要想让父组件传递过来的html标签生效，不能使用插值表达式，只能使用v-html</span><br><span class="line">            &#x2F;&#x2F; 但是这样结构上就会多一个无用的div标签</span><br><span class="line">            &#x2F;&#x2F; template: &#96;&lt;div&gt;</span><br><span class="line">            &#x2F;&#x2F;                 &lt;p&gt;hello&lt;&#x2F;p&gt;</span><br><span class="line">            &#x2F;&#x2F;                 &lt;div v-html&#x3D;&#39;this.content&#39;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">            &#x2F;&#x2F;             &lt;&#x2F;div&gt;&#96;,</span><br><span class="line"></span><br><span class="line">            &#x2F;&#x2F; 使用slot插槽替代child标签里的内容</span><br><span class="line">            template: &#96;&lt;div&gt;</span><br><span class="line">                            &lt;p&gt;hello&lt;&#x2F;p&gt;</span><br><span class="line">                            &lt;slot&gt;&lt;&#x2F;slot&gt;</span><br><span class="line">                        &lt;&#x2F;div&gt;&#96;</span><br><span class="line">        &#125;)</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &quot;#app&quot;,</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h2 id="具名插槽"><a href="#具名插槽" class="headerlink" title="具名插槽"></a>具名插槽</h2><p><img src="https://i.loli.net/2020/09/19/n4oAjpwDZSEu8Km.png" alt="image-20200919014559911"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- &lt;child content&#x3D;&quot;&lt;p&gt;Dell&lt;&#x2F;p&gt;&quot;&gt;&lt;&#x2F;child&gt; --&gt;</span><br><span class="line">        &lt;!-- 使用插槽可以向子组件优雅的传递DOM结构 --&gt;</span><br><span class="line">        &lt;child&gt;</span><br><span class="line">            &lt;!-- 向子组件插入p标签 --&gt;</span><br><span class="line">            &lt;div class&#x3D;&quot;header&quot; slot&#x3D;&quot;header&quot;&gt;header&lt;&#x2F;div&gt;</span><br><span class="line">            &lt;div class&#x3D;&quot;footer&quot; slot&#x3D;&quot;footer&quot;&gt;footer&lt;&#x2F;div&gt;</span><br><span class="line">        &lt;&#x2F;child&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        Vue.component(&#39;child&#39;, &#123;</span><br><span class="line">            props: [&#39;content&#39;],</span><br><span class="line">            &#x2F;&#x2F; 使用slot插槽替代child标签里的内容</span><br><span class="line">            template: &#96;&lt;div&gt;</span><br><span class="line">                            &lt;slot name&#x3D;&quot;header&quot;&gt;&lt;&#x2F;slot&gt;</span><br><span class="line">                            &lt;div class&#x3D;&quot;content&quot;&gt;content&lt;&#x2F;div&gt;</span><br><span class="line">                            &lt;slot name&#x3D;&quot;footer&quot;&gt;&lt;&#x2F;slot&gt;</span><br><span class="line">                        &lt;&#x2F;div&gt;&#96;</span><br><span class="line">        &#125;)</span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &quot;#app&quot;,</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<p><img src="https://i.loli.net/2020/09/19/G8HLlBftZh9CbdS.png" alt="image-20200919014702334"></p>
<h2 id="作用域插槽"><a href="#作用域插槽" class="headerlink" title="作用域插槽"></a>作用域插槽</h2><h2 id="动态组件与v-once指令"><a href="#动态组件与v-once指令" class="headerlink" title="动态组件与v-once指令"></a>动态组件与v-once指令</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- 调用两个子组件</span><br><span class="line">        &lt;child-one v-if&#x3D;&quot;type&#x3D;&#x3D;&#x3D;&#39;child-one&#39;&quot;&gt;&lt;&#x2F;child-one&gt;</span><br><span class="line">        &lt;child-two v-if&#x3D;&quot;type&#x3D;&#x3D;&#x3D;&#39;child-two&#39;&quot;&gt;&lt;&#x2F;child-two&gt; --&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!-- 动态组件绑定 --&gt;</span><br><span class="line">        &lt;!-- 根据type的值动态的更改组件 --&gt;</span><br><span class="line">        &lt;component :is&#x3D;&quot;type&quot;&gt;&lt;&#x2F;component&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!-- 点击change，两个组件交替显示 --&gt;</span><br><span class="line">        &lt;button @click&#x3D;&quot;handleBtnClick&quot;&gt;change&lt;&#x2F;button&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        &#x2F;&#x2F; 创建两个子组件</span><br><span class="line">        Vue.component(&#39;child-one&#39;, &#123;</span><br><span class="line">            &#x2F;&#x2F; v-once：被渲染后直接放到内存里，在点击切换时直接从内存里取，性能更高</span><br><span class="line">            template: &#39;&lt;div v-once&gt;child-one&lt;&#x2F;div&gt;&#39;</span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line">        Vue.component(&#39;child-two&#39;, &#123;</span><br><span class="line">            template: &#39;&lt;div v-once&gt;child-two&lt;&#x2F;div&gt;&#39;</span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line">        var vm &#x3D; new Vue(&#123;</span><br><span class="line">            el: &quot;#app&quot;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                type: &#39;child-one&#39;</span><br><span class="line">            &#125;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                handleBtnClick: function () &#123;</span><br><span class="line">                    this.type &#x3D; this.type &#x3D;&#x3D;&#x3D; &#39;child-one&#39; ? &#39;child-two&#39; : &#39;child-one&#39;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>


    </div>

    
    
    

    <footer class="post-footer">
          

<div class="post-copyright">
<ul>
  <li class="post-copyright-author">
      <strong>本文作者： </strong>Carson Zhao
  </li>
  <li class="post-copyright-link">
      <strong>本文链接：</strong>
      <a href="https://bone-nails.gitee.io/2021/04/01/vue%E7%AC%94%E8%AE%B0/" title="vue笔记">https://bone-nails.gitee.io/2021/04/01/vue笔记/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="noopener" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

          <div class="post-tags">
              <a href="/hexo_blog/tags/vue/" rel="tag"># vue</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/hexo_blog/2021/04/01/%E5%88%9D%E8%AF%86Shell%E8%84%9A%E6%9C%AC/" rel="prev" title="初识Shell脚本">
                  <i class="fa fa-chevron-left"></i> 初识Shell脚本
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/hexo_blog/2021/04/01/ping%E4%B8%8D%E9%80%9Aip%E5%9C%B0%E5%9D%80-%E5%A4%96%E7%BD%91%E7%9A%84%E5%8E%9F%E5%9B%A0/" rel="next" title="ping不通ip地址/外网的原因">
                  ping不通ip地址/外网的原因 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>







<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      const commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Carson Zhao</span>
</div>
<div class="wordcount">
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-line"></i>
    </span>
      <span>站点总字数：</span>
    <span title="站点总字数">125k</span>
  </span>
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
      <span>站点阅读时长 &asymp;</span>
    <span title="站点阅读时长">1:54</span>
  </span>
</div>
<div class="busuanzi-count">
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/" class="theme-link" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script size="300" alpha="0.6" zIndex="-1" src="https://cdn.jsdelivr.net/npm/ribbon.js@1.0.2/dist/ribbon.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<script src="/hexo_blog/js/utils.js"></script><script src="/hexo_blog/js/next-boot.js"></script>

  
<script src="/hexo_blog/js/local-search.js"></script>



<script>
if (document.querySelectorAll('.pdf-container').length) {
  NexT.utils.getScript('https://cdn.jsdelivr.net/npm/pdfobject@2.2.4/pdfobject.min.js', () => {
    document.querySelectorAll('.pdf-container').forEach(element => {
      PDFObject.embed(element.dataset.target, element, {
        pdfOpenParams: {
          navpanes : 0,
          toolbar  : 0,
          statusbar: 0,
          pagemode : 'thumbs',
          view     : 'FitH'
        },
        PDFJS_URL: '/hexo_blog/lib/pdf/web/viewer.html',
        height   : element.dataset.height
      });
    });
  }, window.PDFObject);
}
</script>


  <script>
    NProgress.configure({
      showSpinner: true
    });
    NProgress.start();
    document.addEventListener('readystatechange', () => {
      if (document.readyState === 'interactive') {
        NProgress.inc(0.8);
      }
      if (document.readyState === 'complete') {
        NProgress.done();
      }
    });
    document.addEventListener('pjax:send', () => {
      NProgress.start();
    });
    document.addEventListener('pjax:success', () => {
      NProgress.done();
    });
  </script>

  
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>





<script src="/hexo_blog/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginModelPath":"assets/","model":{"jsonPath":"/hexo_blog/live2dw/assets/hijiki.model.json"},"display":{"position":"right","width":200,"height":400},"mobile":{"show":true},"log":false,"pluginJsPath":"lib/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>
